<template>
	<view class="container">
		<view class="wx-auth-container">
			<div class="box">
				<view class="logo-info  ">
					<text class="title">欢迎进入{{ projectName }}</text>
				</view>
				
				<view class="small-tips">
					<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
					<view>您的公开信息（昵称、头像）</view>
				</view>
				<view class="btns">
					<button open-type="getPhoneNumber" @click="scopeUserInfo" class="btn-auth">使用微信授权</button>
					<div @click="backToHome" class="btn-callback">暂不登录</div>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		mpAutoLogin
	} from "@/api/connect.js";
	import {
		getUserInfo
	} from "@/api/members";
	import storage from "@/utils/storage.js";
	import config from '@/config/config';
	
	export default {
		data() {
			return {
				background: {
					backgroundColor: "transparent"
				},
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				show: false,
				// 授权信息展示，商城名称
				projectName: config.name,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "支付宝用户",
				baseSite: {},
			};
		},

		//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
		mounted(){
			let that = this;
			//获取code
			uni.login({
				success: (res) => {
					console.log("code", res.code);
					that.code = res.code;
					that.login(that.code);
				},
			});
		},
		methods: {
			async login(code){
				let res = await mpAutoLogin({
					auth_code:code
				}, "wechat");
				if(res.data.code!=0){
					uni.showToast({
						title:"用户信息获取失败",
						duration:2000,
						icon:"none"
					})
					// uni.navigateBack({
					// 	delta: 1,
					// });
					return ;
				}
				storage.setHasLogin(true);
				console.log("login",res);
				storage.setAccessToken(res.data.accessToken);
				this.$store.commit('loginToken', res.data.accessToken);
				storage.setBouseHouse(res.data.hasBoundHouse);
				this.$store.commit('setBouseHouse', res.data.hasBoundHouse);
				// if(!res.data.bindRoomStatus){
				// 	uni.navigateTo({
				// 		url:`/pages/login/bindRoom`
				// 	})
				// 	return ;
				// }
				
				
				uni.navigateBack({
					delta: 1,
				});
				// uni.navigateTo({
				// 	url:`/pages/index/index`
				// })
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
				// let routes = getCurrentPages();
				// let curRoute = routes[routes.length - 1].options;
				// routes.forEach((item) => {
				// 	if (
				// 		item.route == "pages/login/bindRoom" 
				// 	) {
				// 		uni.switchTab({
				// 			url: "pages/index/index",
				// 		});
				// 	}
				// });
				// uni.navigateBack({
				// 	delta: 1,
				// });
			},
			phoneBindPopupClose(e) {
				if (e.show == false) {
					this.$refs.verification.hide();
					console.log("phoneBindPopupClose", e)
				}

			},
			
			
			
			//获取手机号授权
			async getPhoneNumber(e) {
				console.log('获取授权');
				
				let code = this.code;
				let image = this.image;
				let nickName = this.nickName;
				let res = await mpAutoLogin({
					code,
					image,
					nickName
				}, "wechat")
				uni.hideLoading();
				console.log("aliAutoLogin", res);
			},
			
			
			
		},
	};
</script>
<style lang="scss" scoped>
	/*微信授权*/
	page {
		background-color: #ffffff;
	}

	.container {
		display: flex;
		height: 100vh;
		background-image: linear-gradient(rgba(252, 110, 100, 1), rgba(255, 151, 65, 0.7), rgba(255, 151, 65, 0.3), rgba(249, 108, 101, 0));
	}

	.wx-auth-container {
		width: 100%;
		margin-top: 10%;
	}

	.logo-info {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;

		font-weight: bold;
	}

	

	.logo-info-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: none;
	}

	text.title,
	text.shop {
		display: inline-block;
		font-size: 60rpx;
		color: #333;
	}

	text.shop {
		display: inline-block;
		font-size: 55rpx;
		color: #333;
	}

	.box {
		margin: 0 32rpx;
	}

	/* 文字提示*/
	.small-tips {
		width: 94%;
		padding: 20rpx;
		font-size: 24rpx;
		margin: 0 0 20rpx;
		// color: #999;
		color: rgb(226, 110, 95)
	}

	.auth-button {
		padding: 10px 20px;
		width: calc(100% - 20 * 4rpx);
	}

	.tips {
		width: 80%;
		text-align: left;
		margin: 6% 10%;
		margin-top: 48rpx;
		line-height: 1.75;
	}

	.register {
		
		border: none !important;
		background: #fff !important;
	}

	.btn-auth {
		color: white;
		background-image: linear-gradient(45deg, rgb(251, 108, 100), rgb(246, 149, 98));
		width: 92%;
		margin: 0 auto 40rpx;
		border-radius: 100px;
		animation: mymove 5s infinite;
		-webkit-animation: mymove 5s infinite;
		/*Safari and Chrome*/
		animation-direction: alternate;
		/*轮流反向播放动画。*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		/* Safari 和 Chrome */
		-webkit-animation: mymove 5s infinite;
		-webkit-animation-direction: alternate;
		/*轮流反向播放动画。*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
	}

	.btn-callback {
		text-align: center;
		font-size: 30rpx;
		background: transparent;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100px;
		width: 92%;
		margin: 0 auto;
		color: rgb(223, 118, 112);
		border: 1px solid rgb(223, 118, 112);
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}

	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>